<template>
    <div class="text" v-bind:class="{box: isbox, border: isBorder}">
        <div v-bind:class="{inner: isInner}">春夏</div>
        <div v-bind:class="classObject">秋冬</div>
        <div v-bind:class="classMeal">三餐</div>
    </div>
</template>

<script setup>
    import {ref, reactive, computed} from 'vue'
    const isbox = ref(true)
    const isBorder = ref(true)
    const isInner = ref(true)
    const classObject = reactive({inner: true})
    const classMeal = computed(() => ({
        meal: isMeal.value
    }))
</script>

<style scoped>
.text {
    text-align: center;
    line-height: 30px;
}
.box {
    width: 100%;
    background: linear-gradient(white, rgb(239, 250, 86));
}
.border {
    border: 2px dotted black;
}
.inner {
    margin-top: 2px;
    width: 100%;
    height: 30px;
    border: 2px double black;
}
.meal {
    width: 100%;
    height: 30px;
    border: 2px dashed rgb(120, 81, 227);
}
</style>